import { openURL, useQuasar } from '@teld/q-components';
import Icon from '@teld/q-components/Icon';
import Tooltip from '@teld/q-components/Tooltip';
import { createNameSpace } from 't/common/utils';
import { computed, defineComponent, watch } from 'vue';
import styles from './index.module.scss';
import './index.scss';

export default defineComponent({
  name: createNameSpace('help-popover'),
  props: {
    helpConf: {
      type: Boolean,
      default() {
        return false;
      },
    },
    helpTooltip: String,
    helpPlacement: String,
    helpMore: String,
    helpMorePopup: String,
    maxHeight: String,
    maxWidth: String,
    helpMoreLink: String,
    helpMoreLinkHrefStatic: String,
    helpMoreLinkHrefExp: String,
    helpEffect: String,
    onHelpClickHandler: Function,
    icon: {
      type: String,
      default() {
        return 'help_outline';
      },
    },
    inBody: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose();
    const $q = useQuasar();

    watch(
      () => {
        return [];
      },
      (a, b) => {},
    );

    function onClickHandler(params) {
      props.onHelpClickHandler?.(params);

      if (props.helpMore === 'popup') {
        $q.dialog({
          // title: 'Confirm',
          message: props.helpMorePopup,
          cancel: false,
          persistent: false,
        })
          ?.then?.(() => {
            // 用户点击了确认按钮
            console.log('Confirmed');
          })
          ?.catch?.(() => {
            // 用户点击了取消按钮或者关闭了对话框
            console.log('Cancelled');
          });
      }
      if (props.helpMore === 'link') {
        if (props.helpMoreLink === 'static') {
          openURL(props.helpMoreLinkHrefStatic);
        } else {
          openURL(props.helpMoreLinkHrefExp);
        }
      }
    }
    // 定义一个转义特殊字符的函数，但不处理中文字符
    function escapeSpecialChars(str) {
      if (!str) return '';
      // 使用正则表达式匹配所有特殊字符，但排除中文字符
      const escapedStr = str.replace(
        /[^ -~]+(?<![\u4e00-\u9fa5])/g,
        function (match) {
          let replaced = '';
          for (let i = 0; i < match.length; i++) {
            replaced += '&#' + match.charCodeAt(i) + ';';
          }
          return replaced;
        },
      );
      return escapedStr;
    }
    let position = computed(() => {
      let p = {
        anchor: 'center right',
        self: 'center left',
      };
      if (props.helpPlacement === 'bottom') {
        p = {
          anchor: 'bottom middle',
          self: 'top middle',
        };
      }
      if (props.helpPlacement === 'left') {
        p = {
          anchor: 'center left',
          self: 'center end',
        };
      }
      if (props.helpPlacement === 'top') {
        p = {
          anchor: 'top middle',
          self: 'bottom middle',
        };
      }
      return p;
    });

    return () => {
      if (!props.helpConf) {
        return null;
      }

      return (
        <span class={styles.module} onClick={onClickHandler}>
          <Icon name={props.icon} />
          <Tooltip
            // class={
            //   // props.helpEffect === 'dark' ? 'bg-black text-body2' : ''
            //   // 'bg-white text-black'
            // }
            class='t-help-popover'
            maxHeight={props.maxHeight}
            maxWidth={props.maxWidth}
            {...position.value}
            offset={[8, 8]}
            helpMoreClick={onClickHandler}
            inBody={props.inBody}
          >
            <span
              class='help-content'
              v-html={escapeSpecialChars(props.helpTooltip)}
            ></span>
          </Tooltip>
        </span>
      );
    };
  },
});
